import React from 'react';
import { Button, Table, Divider, message, Input } from "antd";
import { connect } from "dva";
import styles from './index.less';
import EditPage from './components/edit/index';

@connect()
class dingdingQunPage extends React.Component {
  state = {
    qunList: [],
    loading: false,
    pageNum: 1,
    pageSize: 10,
    totalCount: 0,
    visible: false,
    editData: null,
    editLoading: false,
    name: '',
    phone: '',
  }

  componentDidMount() {
    this.search();
  }

  search = () => {
    const { dispatch } = this.props;
    const { pageNum, pageSize, name, phone } = this.state;
    this.setState({ loading: true });
    dispatch({
      type: 'channelModel/dingcompanygrouplist',
      payload: { pageNum, pageSize, name, phone },
    }).then(res => {
      if (res.errCode === 0) {
        this.setState({
          qunList: res.datas,
          totalCount: res.totalCount
        });
      }
      this.setState({ loading: false });
    });
  }

  onSizeChange = (value) => {
    this.setState({ pageNum: 1, pageSize: value }, () => {
      this.search();
    });
  }

  editCancel = () => {
    this.setState({ visible: false });
  }

  editOk = (values) => {
    const { pageSize } = this.state;
    const { dispatch } = this.props;

    this.setState({ editLoading: true });
    dispatch({
      type: 'channelModel/dingcompanygroup',
      payload: values,
    }).then(res => {
      if (res.errCode === 0) {
        message.success('操作成功');
        this.setState({ pageNum: 1, pageSize }, this.search());
        this.setState({ visible: false });
      } else {
        message.error(res.errMsg);
      }
      this.setState({ editLoading: false });
    });
  }

  onEditData = (data) => {
    this.setState({ visible: true, editData: data });
  }

  ondel = (data) => {
    const { pageSize } = this.state;
    const { dispatch } = this.props;

    dispatch({
      type: 'channelModel/dingcompanygroupdel',
      payload: { id: data.id },
    }).then(res => {
      if (res.errCode === 0) {
        message.success('操作成功');
        this.setState({ pageNum: 1, pageSize }, this.search());
      }
    });
  }

  render() {
    const { qunList, loading, pageSize, totalCount, visible, editData, editLoading, name, phone } = this.state;

    const columns = [
      {
        title: "群名称",
        dataIndex: "name",
        // render: text => <span title={text}>{text}</span>
      },
      {
        title: "群主电话",
        dataIndex: "phone",
        // render: text => (text ? this.renderType(text) : "--")
      },
      {
        title: "chatId",
        dataIndex: "chatId",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "corpId",
        dataIndex: "corpId",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "corpSecret",
        dataIndex: "corpSecret",
        render: text => <span title={text}>{text}</span>
      },
      {
        title: "操作",
        dataIndex: "operate",
        fixed: "right",
        width: 100,
        render: (_, record) => (
          <span>
            <Button style={{padding:'0'}} type="link" onClick={() => this.onEditData(record)}>
              编辑
          </Button>
            <Divider type="vertical" />
            <Button style={{padding:'0'}} type="link" onClick={() => this.ondel(record)}>
              删除
          </Button>
          </span>
        )
      }
    ];

    return <div className={styles.root}>
      <div className={styles.titleBox}>
        钉钉群列表
      </div>
      <div style={{ padding: '24px' }}>
        <div className={styles.topSearch}>
          <div className={styles.searchBox}>
            <Input style={{ width: '150px' }} placeholder="群名称" value={name} onChange={(e) => this.setState({ name: e.target.value })} />
            <Input style={{ width: '150px' }} placeholder="群主联系电话" value={phone} onChange={(e) => this.setState({ phone: e.target.value })} />
            <Button type="primary" onClick={() => this.setState({ name: '', phone: '' }, () => this.search())}>重置</Button>
            <Button type="primary" onClick={() => this.search()}>搜索</Button>
          </div>
        </div>
        <div className={styles.tableYopSearch}>
          <span>钉钉群列表</span>
          <Button type="primary" onClick={() => this.onEditData(null)}>新增</Button>
        </div>
        <Table
          style={{ background: '#fff',padding: '0 32px' }}
          rowKey={record => record.timeCreate}
          columns={columns}
          // scroll={messageBackLogList.length === 0 ? { x: false } : { x: 1200 }}
          dataSource={qunList}
          locale={{ emptyText: "暂无数据！" }}
          size="middle"
          // onChange={(e, filters, sorter) =>
          // this.handleTableChange(e, filters, sorter)}
          loading={loading}
          pagination={{
            pageSize,
            showQuickJumper: true,
            showSizeChanger: true,
            // current: pageNum,
            total: totalCount,
            onChange: (page, size) => this.setState({ pageNum: page, pageSize: size }, () => this.search()),
            onShowSizeChange: (_, value) => this.onSizeChange(value),
            showTotal: total => `共有 ${total} 条`
          }}
        />
      </div>
      <EditPage visible={visible} editData={editData} editOk={this.editOk} editLoading={editLoading} editCancel={this.editCancel} />
    </div>;
  }
}

export default dingdingQunPage;